<template>
  <header class="header" :style="{ 'background-color': bgc, color: fc }">
    <div class="icon" @click="goBack" :style="{ 'background-color': bgc }">
      <i class="iconfont icon-xiangzuo"></i>
    </div>
    <div class="text"><slot></slot></div>
  </header>
</template>

<script>
export default {
  props: {
    bgc: {
      type: String,
      default: "#fff",
    },
    fc: {
      type: String,
    },
  },
  methods: {
    goBack() {
      this.$router.back();
    },
  },
};
</script>

<style lang="scss" scoped>
$h: 50px;
$bg: #fff;

.header {
  width: 100%;
  height: $h;
  line-height: $h;
  display: flex;
  position: fixed;
  top: 0;
  z-index: 90;
  border-bottom: 1px solid #fafafa;
  background-color: $bg;
  background-color: #fff;
}
.icon {
  width: 35px;
  position: relative;
  z-index: 99;
  background-color: $bg;
  .iconfont {
    font-size: 20px;
  }
}
.text {
  position: absolute;
  left: 50%;
  transform: translate(-50%, 0);
  font-size: 18px;
}
</style>